<template>
    <div style="width: 85%;padding: 20px;background-color: white" >
        <ruletitlebutton style="margin-bottom: 10px;"/>
        <el-table :data="store.$state.tableData" style="width: 100%" @selection-change="handleSelectionChange" :header-cell-style="{ backgroundColor: '#f5f7fa' ,height:'59px'}"
            :default-sort="{ prop: 'mobile', order: 'descending' }">
            <el-table-column type="selection" width="55" />
            <el-table-column label="头像" prop="date">
                <template #default="scope">
                    <el-avatar :size="30" :src="scope.row.staffPhoto" />
                </template>
            </el-table-column>
            <el-table-column label="姓名" prop="username" />
            <el-table-column label="手机号" prop="mobile" sortable />
            <el-table-column label="工号" prop="workNumber" />
            <el-table-column label="聘用形式" prop="">
                <template #default="scope">
                    {{ scope.row.formOfEmployment == 1 ? "正式" : '非正式' }}
                </template>
            </el-table-column>
            <el-table-column label="部门" prop="departmentName" />
            <el-table-column label="入职时间" prop="username" />
            <el-table-column label="操作" width="140">
                <template #default="scope">
                    <div style="display: flex;justify-content: space-between;color: #66b1ff;">
                        <div style="cursor: pointer;" @click="$router.push('/home/employee/detail?id=' + scope.row.id)">
                            查看
                        </div>
                        <div style="cursor: pointer;" @click="overshow(scope.row)">角色</div>
                        <div style="cursor: pointer;" @click="handleDelete(scope.$index, scope.row)">删除</div>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination style="display: flex;justify-content: right;" v-model:current-page="currentPage1"
            :page-size="pagesize" :small="small" :disabled="disabled" :background="background"
            layout="total, prev, pager, next" :total="Number(store.$state.total)"
            @current-change="handleCurrentChange" />
    </div>
</template>
<script setup lang="ts">
import { computed, onMounted, ref, watchEffect } from 'vue'
import { useStore } from '../../stores/counter'
import ruletitlebutton from './ruletitlebutton.vue';
import { delStaff, exportStaff } from '@/api/staff'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRoute } from 'vue-router'
const store = useStore()
const route = useRoute()
const handleSelectionChange = (val: any[]) => {
    store.$state.Much = val
}
onMounted(() => {
    currentPage1.value = 1
    store.render(currentPage1.value, pagesize.value, '', store.$state.ruleleftid)
})

interface User {
    date: string
    name: string
    address: string
}
//角色
const overshow = (row: any) => {
    store.$state.dialogVisible = true
    store.$state.alerttitle = '分配角色',
        store.$state.infoId = String(row.id)
}
const currentPage1 = ref(1)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
let pagesize = ref(10)
watchEffect(() => {
    currentPage1.value = 1
})
const handleDelete = (index: number, row: any) => {
    ElMessageBox.confirm(
        '确认删除此信息吗?',
        '提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            ElMessage({
                type: 'success',
                message: '删除成功',
            })
            delStaff(String(row.id)).then(res => {
                store.render(currentPage1.value, pagesize.value, '', store.$state.ruleleftid)
            })

        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消删除',
            })
        })
}
//分页
const handleCurrentChange = (val: number) => {
    store.render(currentPage1.value, pagesize.value, '', store.$state.ruleleftid)
}
</script>

<style scoped>
.demo-pagination-block+.demo-pagination-block {
    margin-top: 10px;
}

.demo-pagination-block .demonstration {
    margin-bottom: 16px;
}
</style>